
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>商砼任务单统计与分析</title>
    <jsp:include page="/common/backend_common.jsp"/>
    <jsp:include page="/common/page.jsp"/>
    <script src="https://code.highcharts.com/highcharts.js"></script>
    <script src="https://code.highcharts.com/modules/drilldown.js"></script>
    <script src="https://code.highcharts.com/modules/data.js"></script>

    <!-- 需要保存导出功能模块文件是在 highcharts.js 之后引入 -->
    <script src="http://cdn.hcharts.cn/highcharts/modules/exporting.js"></script>

    <!-- 客户端导出功能模块为可选选项 -->
    <script src="http://cdn.hcharts.cn/highcharts/modules/offline-exporting.js"></script>
    <!-- 插件文件 -->
    <script src="http://cdn.hcharts.cn/highcharts/modules/export-data.js"></script>

    <%--<script src="http://cdn.hcharts.cn/libs/highcharts-export-csv/export-csv.js"></script>--%>

</head>
<body>
<div id="container3" style="width: 80%; height: 50%; margin: 0 auto">

</div>
<button id="preview">数据预览</button>
<script language="JavaScript">
    Highcharts.setOptions({
        lang:{
            contextButtonTitle:"图表导出菜单",
            decimalPoint:".",
            downloadJPEG:"下载JPEG图片",
            downloadPDF:"下载PDF文件",
            downloadPNG:"下载PNG文件",
            downloadSVG:"下载SVG文件",
            downloadCSV: '下载 CSV  文件',
            downloadXLS: '下载 XLS   文件',
            viewData: '查看数据表格',
            drillUpText:"返回 {series.name}",
            loading:"加载中",
            months:["一月","二月","三月","四月","五月","六月","七月","八月","九月","十月","十一月","十二月"],
            noData:"没有数据",
            numericSymbols: [ "千" , "兆" , "G" , "T" , "P" , "E"],
            printChart:"打印图表",
            resetZoom:"恢复缩放",
            resetZoomTitle:"恢复图表",
            shortMonths: [ "Jan" , "Feb" , "Mar" , "Apr" , "May" , "Jun" , "Jul" , "Aug" , "Sep" , "Oct" , "Nov" , "Dec"],
            thousandsSep:",",
            weekdays: ["星期一", "星期二", "星期三", "星期三", "星期四", "星期五", "星期六","星期天"]
        },
        exporting: {
            url: 'https://export.highcharts.com.cn'
        },

        credits: {
            text: '思齐软件',
            url: 'http://tianjinsiqi.com'
        }
    });

    $(document).ready(function() {
        var title = {
            text: '月平均气温'
        };
        var subtitle = {
            text: 'Source: runoob.com'
        };
        var xAxis = {
            categories: ['一月', '二月', '三月', '四月', '五月', '六月'
                ,'七月', '八月', '九月', '十月', '十一月', '十二月']
        };
        var yAxis = {
            title: {
                text: 'Temperature (\xB0C)'
            },
            plotLines: [{
                value: 0,
                width: 1,
                color: '#808080'
            }]
        };

        var tooltip = {
            valueSuffix: '\xB0C'
        }

        var legend = {
            layout: 'vertical',
            align: 'right',
            verticalAlign: 'middle',
            borderWidth: 0
        };

        var series =  [
            {
                name: 'Tokyo',
                data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2,
                    26.5, 23.3, 18.3, 13.9, 9.6]
            },
            {
                name: 'New York',
                data: [-0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8,
                    24.1, 20.1, 14.1, 8.6, 2.5]
            },
            {
                name: 'Berlin',
                data: [-0.9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6,
                    17.9, 14.3, 9.0, 3.9, 1.0]
            },
            {
                name: 'London',
                data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0,
                    16.6, 14.2, 10.3, 6.6, 4.8]
            }
        ];

        var json = {};

        json.title = title;
        json.subtitle = subtitle;
        json.xAxis = xAxis;
        json.yAxis = yAxis;
        json.tooltip = tooltip;
        json.legend = legend;
        json.series = series;

        $('#container3').highcharts(json);
        // var chart =
        // var chart = $('#container3').highcharts(json);
        // var chart = new Highcharts.Chart(json);


    });
    $('#preview').click(function() {
        // alert(Highcharts.charts);
        alert(Highcharts.charts[0].getCSV());
    });

</script>
<hr>
<div id="container" style="width: 80%; height: 50%; margin: 0 auto"></div>
<script language="JavaScript">
    $(document).ready(function() {


        var chart = {
            type: 'spline',
            animation: Highcharts.svg, // don't animate in IE < IE 10.
            marginRight: 10,
            events: {
                load: function () {
                    // set up the updating of the chart each second
                    var series = this.series[0];
                    setInterval(function () {
                        var x = (new Date()).getTime(), // current time
                            y = Math.random();
                        series.addPoint([x, y], true, true);
                    }, 1000);
                }
            },
        };

        var title = {
            text: 'Live random data'
        };
        var xAxis = {
            type: 'datetime',
            tickPixelInterval: 150
        };
        var yAxis = {
            title: {
                text: 'Value'
            },
            plotLines: [{
                value: 0,
                width: 1,
                color: '#808080'
            }]
        };
        var tooltip = {
            formatter: function () {
                return '<b>' + this.series.name + '</b><br/>' +
                    Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.x) + '<br/>' +
                    Highcharts.numberFormat(this.y, 2);
            }
        };
        var plotOptions = {
            area: {
                pointStart: 1940,
                marker: {
                    enabled: false,
                    symbol: 'circle',
                    radius: 2,
                    states: {
                        hover: {
                            enabled: true
                        }
                    }
                }
            }
        };
        var legend = {
            enabled: false
        };

        var series= [{
            name: 'Random data',
            data: (function () {
                // generate an array of random data
                var data = [],time = (new Date()).getTime(),i;
                for (i = -19; i <= 0; i += 1) {
                    data.push({
                        x: time + i * 1000,
                        y: Math.random()
                    });
                }
                return data;
            }())
        }];

        var json = {};
        json.chart = chart;
        json.title = title;
        json.tooltip = tooltip;
        json.xAxis = xAxis;
        json.yAxis = yAxis;
        json.legend = legend;
        json.series = series;
        json.plotOptions = plotOptions;


        Highcharts.setOptions({
            global: {
                useUTC: false
            }
        });
        $('#container').highcharts(json);

    });
</script>
<hr>
<hr>

<div id="container0" style="width: 550px; height: 400px; margin: 0 auto"></div>
<script language="JavaScript">
    // var isDatetimeAxis
    $(document).ready(function() {
        var title = {
            text: 'Combination chart'
        };
        var xAxis = {
            categories: ['一月', '二月', '三月', '四月', '五月'],

        };

        var labels = {
            items: [{
                html: '水果消费',
                style: {
                    left: '50px',
                    top: '18px',
                    color: (Highcharts.theme && Highcharts.theme.textColor) || 'black'
                }
            }]
        };
        var series= [{
            type: 'column',
            name: 'Jane',
            data: [3, 2, 1, 3, 4]
        }, {
            type: 'column',
            name: 'John',
            data: [2, 3, 5, 7, 6]
        }, {
            type: 'column',
            name: 'Joe',
            data: [4, 3, 3, 9, 0]
        }, {
            type: 'spline',
            name: 'Average',
            data: [3, 2.67, 3, 6.33, 3.33],
            marker: {
                lineWidth: 2,
                lineColor: Highcharts.getOptions().colors[3],
                fillColor: 'white'
            }
        }, {
            type: 'pie',
            name: '总消费',
            data: [{
                name: 'Jane',
                y: 13,
                color: Highcharts.getOptions().colors[0] // Jane 的颜色
            }, {
                name: 'John',
                y: 23,
                color: Highcharts.getOptions().colors[1] // John 的颜色
            }, {
                name: 'Joe',
                y: 19,
                color: Highcharts.getOptions().colors[2] // Joe 的颜色
            }],
            center: [100, 80],
            size: 100,
            showInLegend: false,
            dataLabels: {
                enabled: false
            }
        }
        ];

        var json = {};
        json.title = title;
        json.xAxis = xAxis;
        json.labels = labels;
        json.series = series;
        $('#container0').highcharts(json);
    });
</script>
<hr style="height: 10px;color: #66CC99">
<div id="container1" style="width: 550px; height: 400px; margin: 0 auto"></div>
<script language="JavaScript">
    $(document).ready(function() {

        Highcharts.data({
            csv: document.getElementById('tsv').innerHTML,
            itemDelimiter: '\t',
            parsed: function (columns) {
                var brands = {}, brandsData = [], versions = {}, drilldownSeries = [];

                // Parse percentage strings
                columns[1] = $.map(columns[1], function (value) {
                    if (value.indexOf('%') === value.length - 1) {
                        value = parseFloat(value);
                    }
                    return value;
                });

                $.each(columns[0], function (i, name) {
                    var brand, version;

                    if (i > 0) {

                        // Remove special edition notes
                        name = name.split(' -')[0];

                        // Split into brand and version
                        version = name.match(/([0-9]+[\.0-9x]*)/);
                        if (version) {
                            version = version[0];
                        }
                        brand = name.replace(version, '');

                        // Create the main data
                        if (!brands[brand]) {
                            brands[brand] = columns[1][i];
                        } else {
                            brands[brand] += columns[1][i];
                        }

                        // Create the version data
                        if (version !== null) {
                            if (!versions[brand]) {
                                versions[brand] = [];
                            }
                            versions[brand].push(['v' + version, columns[1][i]]);
                        }
                    }

                });

                $.each(brands, function (name, y) {
                    brandsData.push({
                        name: name,
                        y: y,
                        drilldown: versions[name] ? name : null
                    });
                });
                $.each(versions, function (key, value) {
                    drilldownSeries.push({
                        name: key,
                        id: key,
                        data: value
                    });
                });

                var chart = {
                    type: 'pie'
                };
                var title = {
                    text: 'Browser market shares. November, 2013'
                };
                var subtitle = {
                    text: 'Click the slices to view versions. Source: netmarketshare.com.'
                };
                var xAxis = {
                    type: 'category'
                };
                var yAxis ={
                    title: {
                        text: 'Total percent market share'
                    }
                };
                var tooltip = {
                    headerFormat: '<span style="font-size:11px">{series.name}</span><br>',
                    pointFormat: '<span style="color:{point.color}">{point.name}</span>: <b>{point.y:.2f}%</b> of total<br/>'
                };
                var credits = {
                    enabled: false
                };
                var series= [{
                    name: 'Brands',
                    colorByPoint: true,
                    data: brandsData
                }];
                var drilldown= {
                    series: drilldownSeries
                }

                var json = {};
                json.chart = chart;
                json.title = title;
                json.subtitle = subtitle;
                json.xAxis = xAxis;
                json.yAxis = yAxis;
                json.tooltip = tooltip;
                json.credits = credits;
                json.series = series;
                json.drilldown = drilldown;
                $('#container1').highcharts(json);
            }
        });
    });

</script>
<!-- Data from www.netmarketshare.com. Select Browsers => Desktop share by version. Download as tsv. -->
<pre id="tsv" style="display:none">
Browser Version	Total Market Share
Microsoft Internet Explorer 8.0	26.61%
Microsoft Internet Explorer 9.0	16.96%
Chrome 18.0	8.01%
Chrome 19.0	7.73%
Firefox 12	6.72%
Microsoft Internet Explorer 6.0	6.40%
Firefox 11	4.72%
Microsoft Internet Explorer 7.0	3.55%
Safari 5.1	3.53%
Firefox 13	2.16%
Firefox 3.6	1.87%
Opera 11.x	1.30%
Chrome 17.0	1.13%
Firefox 10	0.90%
Safari 5.0	0.85%
Firefox 9.0	0.65%
Firefox 8.0	0.55%
Firefox 4.0	0.50%
Chrome 16.0	0.45%
Firefox 3.0	0.36%
Firefox 3.5	0.36%
Firefox 6.0	0.32%
Firefox 5.0	0.31%
Firefox 7.0	0.29%
Proprietary or Undetectable	0.29%
Chrome 18.0 - Maxthon Edition	0.26%
Chrome 14.0	0.25%
Chrome 20.0	0.24%
Chrome 15.0	0.18%
Chrome 12.0	0.16%
Opera 12.x	0.15%
Safari 4.0	0.14%
Chrome 13.0	0.13%
Safari 4.1	0.12%
Chrome 11.0	0.10%
Firefox 14	0.10%
Firefox 2.0	0.09%
Chrome 10.0	0.09%
Opera 10.x	0.09%
Microsoft Internet Explorer 8.0 - Tencent Traveler Edition	0.09%
</pre>
</body>
</html>
